﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="testimonials.aspx.cs" Inherits="testimonials" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <style type="text/css">
        .nav-sub-container p ~ p
        {
            padding-top: 0px;
        }


        .testimonial
        {
            margin: 0;
            background: #2C84EE;
            padding: 10px 50px;
            position: relative;
            font-family: Georgia, serif;
            color: #FFF;
            border-radius: 5px;
            font-style: italic;
        }

            .testimonial:before, .testimonial:after
            {
                content: "\201C";
                position: absolute;
                font-size: 80px;
                line-height: 1;
                color: #FFF;
                font-style: normal;
            }

            .testimonial:before
            {
                top: 0;
                left: 10px;
            }

            .testimonial:after
            {
                content: "\201D";
                right: 10px;
                bottom: -0.5em;
            }

        .arrow-down
        {
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #2C84EE;
            margin: 0 0 0 25px;
        }

        .testimonial-author
        {
            margin: 0 0 10px 25px;
            font-family: Arial, Helvetica, sans-serif;
            color: #999;
            text-align: left;
        }

            .testimonial-author span
            {
                font-size: 12px;
                color: #666;
            }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {


            /// Load testimonials on page load
            if ($('#nav-subtab-3c').is(':checked')) {
                loadTestimonials();

            }

            $('.nav-subtab-ctrl').click(function () {

                /// Load testimonials
                if ($('#nav-subtab-3c').is(':checked')) {
                    loadTestimonials();

                } else if ($('#nav-subtab-2c').is(':checked')) { /// Add new testimonial
                    $('#nav-sendtestimonial').click(function (e) {
                        $('#info').html("We really appreciate your feedback. Feel free to contact us on <a style='color: #fff; text-decoration: none;' href='mailto:uclgadgeteer@gmail.com'>uclgadgeteer@gmail.com</a> or use the form below to leave your feedback.");
                        postTestimonial(e);
                    });
                }
            });

            function postTestimonial(e) {

                e.preventDefault();

                resetValidation();

                if (!validate()) {
                    return false;
                }

                var email = $('#email').val();
                var fullname = $('#fullname').val();
                var message = $('#message').val();
                var subject = $('#subject').val();
                var datetime = new Date().getTime();
                var formatDateTime = "\/Date(" + datetime + ")\/";

                var args = { "Email": email, "Fullname": fullname, "Message": message, "Subject": subject, "Time": formatDateTime };

                $.ajax({
                    type: "POST",
                    //async: false,
                    url: "http://uclwebservicetest.cloudapp.net/Services/users.svc/testimonial",
                    data: JSON.stringify(args),
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        console.log("response");
                        console.log(response);
                        $('#info').show();
                        $('#info').html('Your feedback has been successfully sent.');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#info').html('An error occurred while trying to send your message. Try again later.');

                        console.log(jqXHR.status);
                        console.log(textStatus);
                        console.log(errorThrown);

                        console.log("ARGS: %s", JSON.stringify(args));
                    }
                });
            }

            function loadTestimonials() {

                $('#testimonials-list').html('');

                var testimonials = $.ajax({
                    type: 'GET',
                    url: "http://uclwebservicetest.cloudapp.net/Services/users.svc/testimonial",
                    contentType: "application/json; charset=utf-8",
                    global: false,
                    async: false,
                    success: function (data) {
                        return data;
                    }
                }).responseText;

                var objTestimonials = jQuery.parseJSON(testimonials);

                $.each(objTestimonials, function (i, testimonials) {
                    var testimonialsHTML = "";
                    testimonialsHTML += "<blockquote class='testimonial'>";
                    testimonialsHTML += "<p>" + testimonials.Message + "</p>";
                    testimonialsHTML += "</blockquote>";
                    testimonialsHTML += "<div class='arrow-down'></div>";
                    testimonialsHTML += "<p class='testimonial-author'>" + testimonials.Fullname + " | <span>" + testimonials.Email + "</span></p>";

                    $('#testimonials-list').append(testimonialsHTML);
                });
            }

            /// Functions
            function resetValidation() {
                ///Reset validation
                $("#email").css("outline", "");
                $("#email").css("margin-left", "");
                $("#email").css("margin-top", "");
                $("#email").css("width", "96%");

                $("#fullname").css("outline", "");
                $("#fullname").css("margin-left", "");
                $("#fullname").css("margin-top", "");
                $("#fullname").css("width", "96%");

                $("#message").css("outline", "");
                $("#message").css("margin-left", "");
                $("#message").css("margin-top", "");
                $("#message").css("width", "96%");

                $("#subject").css("outline", "");
                $("#subject").css("margin-left", "");
                $("#subject").css("margin-top", "");
                $("#subject").css("width", "96%");
            }

            function validate() {
                var isValid = true;

                /// Validate input
                if ($('#email').val() == "" || $('#email').val() == "Email") {
                    $("#email").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#email").css("margin-left", "3px");
                    $("#email").css("margin-top", "3px");
                    $("#email").css("width", "94.5%");
                    isValid = false;
                }

                if ($('#fullname').val() == "" || $('#fullname').val() == "Fullname") {
                    $("#fullname").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#fullname").css("margin-left", "3px");
                    $("#fullname").css("margin-top", "3px");
                    $("#fullname").css("width", "94.5%");
                    isValid = false;
                }

                if ($('#message').val() == "" || $('#message').val() == "Message...") {
                    $("#message").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#message").css("margin-left", "3px");
                    $("#message").css("margin-top", "3px");
                    $("#message").css("width", "94.5%");
                    isValid = false;
                }

                if ($('#subject').val() == "" || $('#subject').val() == "Subject") {
                    $("#subject").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#subject").css("margin-left", "3px");
                    $("#subject").css("margin-top", "3px");
                    $("#subject").css("width", "94.5%");
                    isValid = false;
                }

                console.log(isValid);
                if (!isValid)
                    return false;
                else
                    return true;
            }

            /// Focusout input
            $("#email").focusout(function () {
                if ($(this).val() == "Email") {
                    $("#email").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#email").css("margin-left", "3px");
                    $("#email").css("margin-top", "3px");
                    $("#email").css("width", "94.5%");
                } else {
                    $("#email").css("outline", "");
                    $("#email").css("margin-left", "");
                    $("#email").css("margin-top", "");
                    $("#email").css("width", "96%");
                }
            });

            $("#fullname").focusout(function () {
                if ($(this).val() == "Fullname") {
                    $("#fullname").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#fullname").css("margin-left", "3px");
                    $("#fullname").css("margin-top", "3px");
                    $("#fullname").css("width", "94.5%");
                } else {
                    $("#fullname").css("outline", "");
                    $("#fullname").css("margin-left", "");
                    $("#fullname").css("margin-top", "");
                    $("#fullname").css("width", "96%");
                }
            });

            $("#subject").focusout(function () {
                if ($(this).val() == "Subject") {
                    $("#subject").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#subject").css("margin-left", "3px");
                    $("#subject").css("margin-top", "3px");
                    $("#subject").css("width", "94.5%");
                } else {
                    $("#subject").css("outline", "");
                    $("#subject").css("margin-left", "");
                    $("#subject").css("margin-top", "");
                    $("#subject").css("width", "96%");
                }
            });

            $("#message").focusout(function () {
                if ($(this).val() == "Message...") {
                    $("#message").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#message").css("margin-left", "3px");
                    $("#message").css("margin-top", "3px");
                    $("#message").css("width", "94.5%");
                } else {
                    $("#message").css("outline", "");
                    $("#message").css("margin-left", "");
                    $("#message").css("margin-top", "");
                    $("#message").css("width", "96%");
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="testimonialsPage">
        <div id="containerCenter">
            <div id="container">
                <div class="headerTitle">Testimonials</div>
            </div>
        </div>
        <div class="nav-metro">

            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - Testimonials -->
                <label class="nav-subtab subtab-pos-2 solid-blue-2" for="nav-subtab-3c">
                    <span>What others say</span>
                </label>
                <!-- End Sub Tab - Testimonials -->

                <!-- Start Sub Tab Content - Testimonials -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-blue-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-col-0 dark-text">
                            <div id="testimonials-list"></div>

                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Testimonials -->

                <!-- Start Sub Tab - Add Testimonial -->
                <label class="nav-subtab subtab-pos-3 solid-green-2" for="nav-subtab-2c">
                    <span>Leave Feedback</span>
                </label>
                <!-- End Sub Tab - Add Testimonial -->

                <!-- Start Sub Tab Content - Add Testimonial -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div id="info" class="solid-green-2 light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            We really appreciate your feedback. Feel free to contact us on <a style="color: #fff; text-decoration: none;" href="mailto:uclgadgeteer@gmail.com">uclgadgeteer@gmail.com</a> or use the form below to leave your feedback.
                        </div>
                    <div class="nav-col-2 dark-text">
                        <img src="images/feedback.jpg" alt="Leave your Feedback" title="Leave your Feedback" height="320" width="360" />
                    </div>
                    <div class="nav-col-2 dark-text">
                        <div class="nav-contactform">
                            <input type="text" onfocus="if(this.value=='Fullname') this.value=''" onblur="this.value=this.value==''?'Fullname':this.value;" maxlength="100" value="Fullname" name="fullname" id="fullname" class="solid-blue-2 light-text" />
                            <input type="text" onfocus="if(this.value=='Email') this.value=''" onblur="this.value=this.value==''?'Email':this.value;" maxlength="100" value="Email" name="email" id="email" class="solid-blue-2 light-text" />
                            <input type="text" onfocus="if(this.value=='Subject') this.value=''" onblur="this.value=this.value==''?'Subject':this.value;" maxlength="255" value="Subject" name="subject" id="subject" class="solid-blue-2 light-text" />
                            <textarea onfocus="if(this.value=='Message...') this.value=''" onblur="this.value=this.value==''?'Message...':this.value;" name="message" id="message" class="solid-blue-2 light-text">Message...</textarea>
                            <label class="nav-submitbt solid-green-2 light-text floatright" for="nav-sendtestimonial">
                                <span>Leave your Feedback</span>
                            </label>
                            <input type="submit" class="none" value="" id="nav-sendtestimonial" name="submit" />
                        </div>
                    </div>

                    <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Add Testimonial -->

            </div>
            <!-- End Main Item - Metro Style -->
        </div>
    </div>
</asp:Content>

